import React from 'react'
import Address from '../ui-components/address'
import Code from './Code'
import style from './style'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { fetchAddresses } from '../actions/app.action'

export default 
@connect(({ app }) => ({ app }), dispatch => ({actions: bindActionCreators({ fetchAddresses }, dispatch)}))
class extends React.Component {

  fetchAddress(regionId) {
    this.props.actions.fetchAddresses(regionId)
  }

  componentDidMount() {
    this.props.actions.fetchAddresses(1)
  }

  render() {
    return (
      <div className={style.root}>
        <Code>{'<Address fetch={..} addresses={..} onChange={..}/>'}</Code>
        <div style={{width: '330px'}}>
          <Address
            value={{
              province: '2',
              city: '52',
              area: '503',
              detail: 'aa'
            }}
            fetch={::this.fetchAddress}
            addresses={this.props.app.addresses}
            onChange={v => console.log(v)}
          />
        </div>
      </div>
    )
  }
}
